<template>
	<div class="SINGLE_CHOICE">
		<div class="title"><span>请选择</span></div>
		<template v-if="message">
      <div class="questionText" v-if="!$attrs.hideQuestion">{{ message.questionText }}</div>
			<div class="handler_area">
				<template v-for="(item, index) in answers" >
					<div :key="index"
						:type="item.selected ? 'primary' : 'default'"
						@click="select(index, item)"
						size="mini"
						plain
						class="btn"
					>
						{{ item.answerText }}
					</div>
				</template>
			</div>
		</template>
	</div>
</template>
<script>
import { deepCopy } from './utils';

export default {
	data() {
		return {
			answers: null,
			message: null,
		};
	},
	methods: {
		start(message) {
			Object.assign(this.$data, this.$options.data());
			this.message = message;
			this.answers = deepCopy(this.message.answers).map(v => {
				v.selected = false;
				return v;
			});
		},
		select(index, item) {
			const { answerCode, answerText, selected } = item;
			const { answers } = this;
			!selected && answers.map(i => (i.selected = false));
			// answers.map(i => (i.selected = true));
			item.selected = true;
			this.answers = answers;
			const { advisoryId, questionCode, questionFromSource } = deepCopy(this.message);
			const data = {
				advisoryId,
				answers: [item],
				questionCode,
				questionFromSource,
			};
			// advisoryId: "6641514294109"
			// answers: [{answerCode: "no", answerText: "有", isMonopolySingle: true, selected: true}]
			// questionCode: "5282000"
			// questionFromSource: "ADVISORY"
			this.$emit('submit', data);
			answers.map(i => (i.selected = false));
		},
	},
};
</script>
<style lang="scss" scoped>
.title {
	width: 100%;
	height: 48px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px;
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
	.info {
		color: #999;
	}
}
.questionText {
	font-size: 14px;
	padding: 15px;
}

.handler_area {
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 0;
	justify-content: space-around;
  justify-content: flex-start;
	.btn {
		width: 33%;
    display: block;
		border-radius: 4px;
		font-size: 14px;
		background: #f7f8fa;
		border-color: #f7f8fa;
		color: #1e8dff;
		padding: 5px 10px;
    margin-bottom: 5px;
    text-align: center;
    margin-left: 4px;
	}
}
</style>
